<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../images/favicon.ico">

    <title>洲博通 - Dashboard Table coloring </title>

    <!-- Bootstrap 4.0-->
    <link rel="stylesheet" href="../../../assets/vendor_components/bootstrap/dist/css/bootstrap.min.css">

    <!-- Bootstrap extend-->
    <link rel="stylesheet" href="../../css/bootstrap-extend.css">

    <!-- Theme style -->
    <link rel="stylesheet" href="../../css/master_style.css">

    <!-- 洲博通 skins -->
    <link rel="stylesheet" href="../../css/skins/_all-skins.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->

  </head>

  <body class="sidebar-collapse skin-blue sidebar-mini">
  <b data-toggle="push-menu" style="display:none"></b>
    <div class="wrapper">


      <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
          <h1>
            Table coloring
          </h1>
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="breadcrumb-item"><a href="#">Tables</a></li>
            <li class="breadcrumb-item active">Table Color</li>
          </ol>
        </section>

        <!-- Main content -->
        <section class="content">

          <div class="row">
            <div class="col-12">
              <div class="box">
                <div class="box-header">
                  <h4 class="box-title"><strong>Background</strong> colors</h4>
                </div>
                <div class="box-body">
                  <div class="row">
                    <div class="col-12">
                      <h5>Solid background</h5>
                      <p><code>bg-*</code> <a href="#" target="_blank">utility class</a> applies to <em>tr</em>.</p>
                      <table class="table table-lg table-separated">
                        <thead>
                          <tr>
                            <th>#</th>
                            <th>Class name</th>
                            <th>Column heading</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr class="bg-secondary">
                            <th scope="row">1</th>
                            <td>.bg-secondary</td>
                            <td>Column content</td>
                          </tr>
                          <tr class="bg-gray">
                            <th scope="row">2</th>
                            <td>.bg-gray</td>
                            <td>Column content</td>
                          </tr>
                          <tr class="bg-dark">
                            <th scope="row">3</th>
                            <td>.bg-dark</td>
                            <td>Column content</td>
                          </tr>
                          <tr class="bg-primary">
                            <th scope="row">4</th>
                            <td>.bg-primary</td>
                            <td>Column content</td>
                          </tr>
                          <tr class="bg-info">
                            <th scope="row">5</th>
                            <td>.bg-info</td>
                            <td>Column content</td>
                          </tr>
                          <tr class="bg-success">
                            <th scope="row">6</th>
                            <td>.bg-success</td>
                            <td>Column content</td>
                          </tr>
                          <tr class="bg-warning">
                            <th scope="row">7</th>
                            <td>.bg-warning</td>
                            <td>Column content</td>
                          </tr>
                          <tr class="bg-danger">
                            <th scope="row">8</th>
                            <td>.bg-danger</td>
                            <td>Column content</td>
                          </tr>
                          <tr class="bg-pink">
                            <th scope="row">9</th>
                            <td>.bg-pink</td>
                            <td>Column content</td>
                          </tr>
                          <tr class="bg-purple">
                            <th scope="row">10</th>
                            <td>.bg-purple</td>
                            <td>Column content</td>
                          </tr>
                          <tr class="bg-brown">
                            <th scope="row">11</th>
                            <td>.bg-brown</td>
                            <td>Column content</td>
                          </tr>
                          <tr class="bg-cyan">
                            <th scope="row">12</th>
                            <td>.bg-cyan</td>
                            <td>Column content</td>
                          </tr>
                          <tr class="bg-yellow">
                            <th scope="row">13</th>
                            <td>.bg-yellow</td>
                            <td>Column content</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>



                    <div class="col-12">
                      <hr>
                      <h5>Pale background</h5>
                      <p><code>bg-pale-*</code> <a href="#" target="_blank">utility class</a> applies to <em>tr</em>.
                      </p>
                      <table class="table table-lg table-separated">
                        <thead>
                          <tr>
                            <th>#</th>
                            <th>Class name</th>
                            <th>Column heading</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr class="bg-pale-secondary">
                            <th scope="row">1</th>
                            <td>.bg-pale-secondary</td>
                            <td>Column content</td>
                          </tr>
                          <tr class="bg-pale-gray">
                            <th scope="row">2</th>
                            <td>.bg-pale-gray</td>
                            <td>Column content</td>
                          </tr>
                          <tr class="bg-pale-dark">
                            <th scope="row">3</th>
                            <td>.bg-pale-dark</td>
                            <td>Column content</td>
                          </tr>
                          <tr class="bg-pale-primary">
                            <th scope="row">4</th>
                            <td>.bg-pale-primary</td>
                            <td>Column content</td>
                          </tr>
                          <tr class="bg-pale-info">
                            <th scope="row">5</th>
                            <td>.bg-pale-info</td>
                            <td>Column content</td>
                          </tr>
                          <tr class="bg-pale-success">
                            <th scope="row">6</th>
                            <td>.bg-pale-success</td>
                            <td>Column content</td>
                          </tr>
                          <tr class="bg-pale-warning">
                            <th scope="row">7</th>
                            <td>.bg-pale-warning</td>
                            <td>Column content</td>
                          </tr>
                          <tr class="bg-pale-danger">
                            <th scope="row">8</th>
                            <td>.bg-pale-danger</td>
                            <td>Column content</td>
                          </tr>
                          <tr class="bg-pale-pink">
                            <th scope="row">9</th>
                            <td>.bg-pale-pink</td>
                            <td>Column content</td>
                          </tr>
                          <tr class="bg-pale-purple">
                            <th scope="row">10</th>
                            <td>.bg-pale-purple</td>
                            <td>Column content</td>
                          </tr>
                          <tr class="bg-pale-brown">
                            <th scope="row">11</th>
                            <td>.bg-pale-brown</td>
                            <td>Column content</td>
                          </tr>
                          <tr class="bg-pale-cyan">
                            <th scope="row">12</th>
                            <td>.bg-pale-cyan</td>
                            <td>Column content</td>
                          </tr>
                          <tr class="bg-pale-yellow">
                            <th scope="row">13</th>
                            <td>.bg-pale-yellow</td>
                            <td>Column content</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>

                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-12">
              <div class="box">
                <div class="box-header">
                  <h4 class="box-title">Table row <strong>borders</strong></h4>
                </div>

                <div class="box-body">
                  <p>You can use <a href="#" target="_blank">border utility classes</a> on <code>&lt;tr&gt;</code>
                    elements.</p>

                  <table class="table table-lg table-striped">
                    <thead>
                      <tr>
                        <th>#</th>
                        <th>Class name</th>
                        <th>Column heading</th>
                        <th>Column heading</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr class="bt-3 border-primary">
                        <th scope="row">1</th>
                        <td>.bt-3</td>
                        <td>Column content</td>
                        <td>Column content</td>
                      </tr>
                      <tr class="bl-3 border-info">
                        <th scope="row">2</th>
                        <td>.bl-3</td>
                        <td>Column content</td>
                        <td>Column content</td>
                      </tr>
                      <tr class="br-3 border-danger">
                        <th scope="row">3</th>
                        <td>.br-3</td>
                        <td>Column content</td>
                        <td>Column content</td>
                      </tr>
                      <tr class="bb-3 border-purple">
                        <th scope="row">4</th>
                        <td>.bb-3</td>
                        <td>Column content</td>
                        <td>Column content</td>
                      </tr>
                    </tbody>
                  </table>

                </div>
              </div>
            </div>
          </div>

        </section>
        <!-- /.content -->
      </div>



    </div>


    <!-- jQuery 3 -->
    <script src="../../../assets/vendor_components/jquery/dist/jquery.min.js"></script>

    <!-- popper -->
    <script src="../../../assets/vendor_components/popper/dist/popper.min.js"></script>

    <!-- Bootstrap 4.0-->
    <script src="../../../assets/vendor_components/bootstrap/dist/js/bootstrap.min.js"></script>

    <!-- SlimScroll -->
    <script src="../../../assets/vendor_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>

    <!-- FastClick -->
    <script src="../../../assets/vendor_components/fastclick/lib/fastclick.js"></script>

    <!-- 洲博通 App -->
    <script src="../../js/template.js"></script>

    <!-- 洲博通 for demo purposes -->
    <script src="../../js/demo.js"></script>


  </body>

</html>